<template>
    <div class="orderListRuleForm">
        <panle content="拼团订单列表" title='拼团订单列表'></panle>

        <el-form ref="form" :inline="true" :model="form" class="demo-form-inline" label-width="80px">

            <el-form-item label="下单时间" prop="createtime">
                <el-date-picker
                    v-model="form.create_time"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions"
                    align="right"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    range-separator="至"
                    size="mini"
                    start-placeholder="开始日期"
                    type="daterange"
                    unlink-panels
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="订单号" prop="order_no">
                <el-input v-model="form.order_no" placeholder="请输入订单号" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="拼团号" prop="group_no">
                <el-input v-model="form.group_no" placeholder="请输入拼团号" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="state">
                <el-select v-model="form.state" placeholder="请选择" size="mini">
                    <el-option label="待支付" value="1"></el-option>
                    <!--<el-option label="待发货" value="3"></el-option>-->
                    <!--<el-option label="待收货" value="4"></el-option>-->
                    <el-option label="售后中" value="5"></el-option>
                    <el-option label="已完成" value="6"></el-option>
                    <el-option label="已取消" value="7"></el-option>
                    <el-option label="已退款" value="8"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="佣金状态" prop="settle">
                <el-select v-model="form.settle" placeholder="请选择" size="mini">
                    <el-option label="未结算" value="1"></el-option>
                    <el-option label="已结算" value="0"></el-option>

                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="search">搜索</el-button>
                <el-button size="mini" @click="resetForm('form')">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
                <vue-json-excel
                    :data="tableData"
                    :fields="excelFields"
                    name="导出拼团订单.xlsx"
                    style="display: inline;margin-left: 10px;"
                    type="xlsx">
                    <el-button size="mini">导出</el-button>
                </vue-json-excel>

            </el-form-item>
        </el-form>

        <div class="table-wrap">
            <el-table v-loading="loading" :data="tableData" border default-expand-all row-key="id"
                      stripe style="width: 100%;margin-bottom: 20px;">
                <el-table-column type="selection" width="55"></el-table-column>
                <!--<el-table-column label="ID" prop="id"></el-table-column>-->
                <el-table-column label="所属推广员" prop="popu_name"></el-table-column>
                <el-table-column label="拼团号" prop="group_no"></el-table-column>
                <el-table-column label="订单号" prop="order_no"></el-table-column>
                <el-table-column label="商品名称" prop="title"></el-table-column>
                <el-table-column label="商品主图" prop="image">
                    <template slot-scope="scope" width="100%">
                        <el-image :src="scope.row.image" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="下单人" prop="nickname"></el-table-column>
                <!--<el-table-column label="客户手机号" prop="phone"></el-table-column>-->
                <el-table-column label="企微昵称/头像" prop="qw_nickname" width="120">
                    <template slot-scope="scope">
                        <el-row v-if="scope.row.qw_nickname" :gutter="5">
                            <el-col :span="8">
                                <el-image :src="scope.row.qw_avatar" fit="cover" style="width: 100%;"></el-image>
                            </el-col>
                            <el-col :span="16">{{ scope.row.qw_nickname }}</el-col>
                        </el-row>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column label="会员卡号" prop="member_number"></el-table-column>
                <!--              <el-table-column prop="people_num" label="成团人数"></el-table-column>-->
                <el-table-column label="下单时间" prop="createtime"></el-table-column>
                <!--              <el-table-column prop="day_time" label="退单时间"></el-table-column>-->
                <el-table-column label="订单状态" prop="state">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state == 1">待支付</span>
                        <span v-else-if="scope.row.state == 2">待成团</span>
                        <span v-else-if="scope.row.state == 3">待发货</span>
                        <span v-else-if="scope.row.state == 4">待收货</span>
                        <span v-else-if="scope.row.state == 5">售后中</span>
                        <span v-else-if="scope.row.state == 6">已完成</span>
                        <span v-else-if="scope.row.state == 7">已取消</span>
                        <span v-else-if="scope.row.state == 8">已退款</span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付金额" prop="round_actual_payment"></el-table-column>
                <el-table-column label="支付时间" prop="paymenttime"></el-table-column>
                <el-table-column label="平台状态" prop="group_status"></el-table-column>
                <el-table-column label="分享" prop="groups_share"></el-table-column>
                <el-table-column label="下载海报" prop="groups_download"></el-table-column>
                <el-table-column label="二级佣金" prop="earnings_one"></el-table-column>
                <el-table-column label="一级佣金" prop="earnings_two"></el-table-column>
                <el-table-column label="佣金状态" prop="type"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination :current-page="form.pageNumber" :page-size="form.pageSize"
                               :page-sizes="[10, 50, 100, 200]" :total="form.total"
                               background
                               layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>


    </div>

</template>

<script>
import {
    getCustomerLossData,
    getStaffData,
    sendStaff
} from "@/api/scrm/lapsed/lapsed";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {getGroupsOrderList} from "@/api/sell/order/order";

export default {
    name: 'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            options: [],
            value: '',
            open: false,
            tableData: [],
            loading: false,
            number: 0,
            status: 0,
            form: {
                createtime: '',
                order_no: '',
                group_no: '',
                state: '',
                settle: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,

            },
            optionsVa: [],
            value1: [],

            resForm: {
                "status": 0,
                "value1": []
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            excelFields: {
                "拼团号 ": "group_no",
                "订单号 ": "order_no",
                "商品名称": "title",
                "商品主图": "image",
                "客户昵称": "nickname",
                "客户手机号": "phone",
                "所属推广员": "popu_name",
                "售出数量": "number",
                "价格": "price",
                "下单时间": "createtime",
                "退单时间": "agreetime",
                "订单状态": "status",
                "支付金额": "actual_payment",
                "支付时间": "pay_time",
                "一级佣金": "earnings_two",
                "二级级佣金": "earnings_one",
                "佣金状态": "type",

            }
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')

        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            getGroupsOrderList(this.form).then((res) => {
                this.tableData = res.data.data;
                this.form.total = res.data.total;
                this.loading = false;
            })
        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.group_no = ''
            this.form.createtime = ''
            this.form.order_no = ''
            this.form.state = ''
            this.form.settle = ''
            this.init();
        },
        openSaff: async function () {

            const res = await getStaffData();
            this.optionsVa = res.data;
            const des = await getCustomerLossData();
            this.resForm.value1 = des.data.send_name;
            this.resForm.status = des.data.status;
            // this.resForm = {
            //     "status": 0,
            //     "value1": [],
            // };
            this.open = true;

        },
        submitForm: function (data) {

            this.$refs[data].validate((valid) => {
                if (valid) {
                    sendStaff(this.resForm).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.open = false;
                            this.init();

                        } else {
                            this.msgError(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            })
        },

    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}

.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}


</style>